﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>换寝申请</title>
    <!-- Fav  Icon Link -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- themify icons CSS -->
    <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
    <!-- Animations CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Main CSS -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/green.css}" id="style_theme">
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- morris charts -->
    <link rel="stylesheet" th:href="@{/charts/css/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/css/jquery-jvectormap.css}">
    <link rel="stylesheet" th:href="@{/datatable/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <script th:src="@{/js/modernizr.min.js}"></script>
</head>
<body>
<br>
<br>
<br>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">申请人姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="stu_name" lay-verify="title" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">学号</label>
        <div class="layui-input-inline">
            <input type="text" name="stu_id" lay-verify="pass" placeholder="请输入学号" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px">联系方式</label>
            <div class="layui-input-inline">
                <input type="tel" name="stu_tel" lay-verify="required|phone"  placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <br>



    <div class="layui-inline">
        <label class="layui-form-label">现楼房号</label>
        <div class="layui-input-inline">
            <select lay-filter="house" name="hou_id" lay-verify="required" lay-search="" style="width: 100px">
                <option value="">请选择</option>
                <option  th:each="hou:${hous}" th:text="${hou.hou_id}" th:value="${hou.hou_id}"></option>
            </select>
        </div>
    </div>
    <br>
    <br>
    <br>
    <div class="layui-inline">
        <label class="layui-form-label">现寝室号</label>
        <div class="layui-input-inline">
            <select name="dor_id" lay-verify="required" lay-search="" id="dor" style="width: 100px">
                <option value="">请选择</option>
            </select>
        </div>
    </div>

    <br>
    <br>
    <br>
    <div class="layui-inline">
    <label class="layui-form-label">新楼房号</label>
    <div class="layui-input-inline">
        <select lay-filter="house1" name="hou_id" lay-verify="required" lay-search="" style="width: 100px">
            <option value="">请选择</option>
            <option  th:each="hou:${hous}" th:text="${hou.hou_id}" th:value="${hou.hou_id}"></option>
        </select>
    </div>
    </div>
    <br>
    <br>
    <br>
    <div class="layui-inline">
        <label class="layui-form-label">新寝室号</label>
        <div class="layui-input-inline">
            <select name="dor_id" lay-verify="required" lay-search="" id="dor1" style="width: 100px">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <br>
    <br>
    <br>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" style="width: 100px">换寝原因</label>
        <div class="layui-input-block">
            <textarea lay-verify = "text" name="cause" style="width: 42%" placeholder="请输入请假原因" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>

<!-- /Back to Top -->
<!-- Jquery Library-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- Popper Library-->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Library-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Datatable  -->
<script th:src="@{/datatable/jquery.dataTables.min.js}"></script>
<script th:src="@{/datatable/dataTables.bootstrap4.min.js}"></script>
<!-- Custom Script-->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/custom-datatables.js}"></script>
<script th:src="@{/js/layui.js}" charset="utf-8"></script>

<script>
    layui.use(['jquery','form'],function () {
        var form = layui.form;
        var  $ = layui.jquery;
        form.on('select(house)', function(data){
            //清空第二个下拉框
            $('#dor').empty()
            $('#dor').append("<option value=\"\" selected=\"\"></option>");
            //console.log(data.elem); //得到select原始DOM对象
            console.log("value:"+data.value); //得到被选中的值
            var hou = data.value;
            //console.log(data.othis); //得到美化后的DOM对象
            $.ajax({
                url: '/attendance/dor',
                async: false,
                type: 'post',
                data: {hou: hou},
                success: function (data) {
                    console.log(data);
                    /*var t2 = $("#dor").empty();*/
                    for (var i = 0; i < data.length; i++) {
                        /*t2.append("<option value='" + data[i] + "'>" + data[i] + "</option>");*/
                        console.log(data[i]);
                        $('#dor').append(new Option(data[i],data[i]));
                    }

                }
            });
            form.render('select');
        });

    });
    layui.use(['jquery','form'],function () {
        var form = layui.form;
        var  $ = layui.jquery;
        form.on('select(house1)', function(data){
            //清空第二个下拉框
            $('#dor1').empty()
            $('#dor1').append("<option value=\"\" selected=\"\"></option>");
            //console.log(data.elem); //得到select原始DOM对象
            console.log("value:"+data.value); //得到被选中的值
            var hou = data.value;
            //console.log(data.othis); //得到美化后的DOM对象
            $.ajax({
                url: '/attendance/dor',
                async: false,
                type: 'post',
                data: {hou: hou},
                success: function (data) {
                    console.log(data);
                    /*var t2 = $("#dor").empty();*/
                    for (var i = 0; i < data.length; i++) {
                        /*t2.append("<option value='" + data[i] + "'>" + data[i] + "</option>");*/
                        console.log(data[i]);
                        $('#dor1').append(new Option(data[i],data[i]));
                    }

                }
            });
            form.render('select');
        });

    });

    layui.use('laydate', function() {
        var laydate = layui.laydate;
        /*laydate.render({
            elem: '#date1'
            , type: 'month'
            , range: '~'
            , format: 'yyyy-MM'
        });*/
        laydate.render({
            elem: '#test16'
            ,min:0
            ,max:7
            ,type: 'datetime'
            ,range: '到'
            ,format: 'yyyy-MM-dd HH:mm'

        });
    });
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '必填项不能为空';
                }
            }
            ,text: function(value){
                if(value.length < 1){
                    return '必填项不能为空';
                }
                if(value.length > 100){
                    return '请控制字数在100字以内';
                }
            }
            ,date: function(value){
                if(value.length < 1){
                    return '请选择请假时间';
                }
            }
            ,pass: [
                /^[0-9]{12}$/
                ,'请输入正确的学号'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });



    });

</script>



</body>
</html>